Frontend Ytelsestesting: Integrering av Lighthouse CI for Kontinuerlig Forbedring

I dagens digitale landskap er ytelsen til nettsteder avgjørende. Treg lastetid, tilgjengelighetsproblemer og dårlig SEO kan ha en betydelig innvirkning på brukeropplevelsen og, som en konsekvens, forretningsresultatene. Frontend-ytelsestesting har blitt en essensiell del av den moderne programvareutviklingssyklusen, og sikrer at nettsteder og webapplikasjoner er raske, pålitelige og brukervennlige for et globalt publikum. Denne artikkelen dykker ned i integreringen av Lighthouse CI, et kraftig åpen kildekode-verktøy, i din kontinuerlige integrasjonsflyt (CI) for å automatisere frontend-ytelsestesting og drive kontinuerlig forbedring.

Hvorfor er Frontend-ytelsestesting Viktig?

Før vi dykker ned i Lighthouse CI, la oss forstå hvorfor frontend-ytelsestesting er avgjørende:

• Brukeropplevelse: Et raskt og responsivt nettsted gir en bedre brukeropplevelse, noe som fører til økt engasjement og reduserte fluktfrekvenser. Se for deg en potensiell kunde i Tokyo, Japan, som prøver å kjøpe et produkt på en treigt lastende e-handelsside. De vil sannsynligvis forlate siden og se etter alternativer.
• SEO-rangering: Søkemotorer som Google anser nettstedets hastighet og ytelse som rangeringsfaktorer. Raskere nettsteder har en tendens til å rangere høyere i søkeresultatene, noe som driver mer organisk trafikk. Googles Core Web Vitals-initiativ understreker viktigheten av faktorer som Largest Contentful Paint (LCP), First Input Delay (FID) og Cumulative Layout Shift (CLS) for SEO.
• Tilgjengelighet: Ytelsesforbedringer fører ofte til bedre tilgjengelighet for brukere med nedsatt funksjonsevne. Optimalisert kode og bilder kan forbedre opplevelsen for brukere som er avhengige av skjermlesere eller de med begrenset båndbredde.
• Konverteringsrater: Et raskere nettsted kan ha en direkte innvirkning på konverteringsrater. Studier har vist at selv ett sekunds forsinkelse i sidelasting kan føre til en betydelig nedgang i konverteringer. Tenk på en bruker i Mumbai, India, som prøver å bestille en flyreise. En treg bestillingsprosess kan føre til at de forlater kjøpet og velger en konkurrent.
• Ressursoptimalisering: Ytelsestesting hjelper med å identifisere områder hvor ressurser kan optimaliseres, noe som fører til kostnadsbesparelser i form av serverinfrastruktur og båndbreddebruk.

Vi Introduserer Lighthouse CI

Lighthouse CI er et automatisert åpen kildekode-verktøy designet for å integreres sømløst med din CI/CD-flyt. Det kjører Lighthouse, et populært revisjonsverktøy utviklet av Google, og gir innsikt i nettstedets ytelse, tilgjengelighet, SEO, beste praksis og samsvar med Progressive Web App (PWA). Lighthouse CI hjelper deg med å:

• Automatisere ytelsesrevisjoner: Kjør Lighthouse-revisjoner automatisk med hver commit eller pull request.
• Spore ytelse over tid: Overvåk ytelsesmålinger over tid og identifiser regresjoner tidlig.
• Sette ytelsesbudsjetter: Definer ytelsesbudsjetter og la bygg feile hvis de overskrides.
• Integrere med CI/CD-systemer: Integrer med populære CI/CD-systemer som GitHub Actions, GitLab CI, CircleCI og Jenkins.
• Samarbeide om ytelsesproblemer: Del Lighthouse-rapporter og samarbeid med teamet ditt for å løse ytelsesproblemer.

Sette Opp Lighthouse CI

Her er en trinnvis veiledning for å sette opp Lighthouse CI i prosjektet ditt:

1. Installer Lighthouse CI

Installer Lighthouse CI CLI globalt ved hjelp av npm eller yarn:

            npm install -g @lhci/cli
yarn global add @lhci/cli
            

              
                Copy
              
            
          

2. Konfigurer Lighthouse CI

Opprett en lighthouserc.js-fil i prosjektets rotmappe for å konfigurere Lighthouse CI. Her er et eksempel på konfigurasjon:

            module.exports = {
  ci:
{
    collect:
{
      url: ['http://localhost:3000', 'http://localhost:3000/about'],
      startServerCommand: 'npm start',
      numberOfRuns: 3,
    },
    assert:
{
      assertions:
{
        'categories:performance': ['warn', { minScore: 0.9 }],
        'categories:accessibility': ['error', { minScore: 1 }],
        'categories:best-practices': ['warn', { minScore: 0.9 }],
        'categories:seo': ['warn', { minScore: 0.9 }],
        'categories:pwa': ['off'],
        'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
        'largest-contentful-paint': ['warn', { maxNumericValue: 4000 }],
        'total-blocking-time': ['warn', { maxNumericValue: 200 }],
        'cumulative-layout-shift': ['warn', { maxNumericValue: 0.1 }],
      },
    },
    upload:
{
      target: 'temporary-redirect',
    },
  },
};

            

              
                Copy
              
            
          

La oss bryte ned denne konfigurasjonen:

• collect.url: En matrise med URL-er som skal revideres. Dette eksemplet reviderer hjemmesiden og om oss-siden. Du bør inkludere alle kritiske sider på nettstedet ditt, med tanke på ulike brukstilfeller. For eksempel kan et e-handelsnettsted inkludere hjemmesiden, produktlistesider, produktdetaljsider og kasseprosessen.
• collect.startServerCommand: Kommandoen for å starte utviklingsserveren din. Dette er nødvendig hvis Lighthouse CI må kjøre mot et lokalt utviklingsmiljø.
• collect.numberOfRuns: Antall ganger Lighthouse-revisjoner skal kjøres for hver URL. Å kjøre flere revisjoner bidrar til å redusere variasjoner i nettverksforhold og andre faktorer.
• assert.assertions: Et sett med påstander for å validere resultatene fra Lighthouse-revisjonen. Hver påstand spesifiserer en metrikk eller kategori og en terskelverdi. Hvis terskelverdien ikke er oppfylt, vil bygget feile. Dette eksemplet setter terskelverdier for ytelse, tilgjengelighet, beste praksis og SEO-kategorier. Det setter også terskelverdier for spesifikke metrikker som First Contentful Paint (FCP), Largest Contentful Paint (LCP), Total Blocking Time (TBT) og Cumulative Layout Shift (CLS).
• upload.target: Spesifiserer hvor Lighthouse-rapportene skal lastes opp. temporary-redirect laster opp rapportene til en midlertidig lagringsplass og gir en URL for å få tilgang til dem. Andre alternativer inkluderer å bruke Lighthouse CI-serveren eller skylagringsløsninger som Google Cloud Storage eller Amazon S3.

3. Integrer med ditt CI/CD-system

Neste trinn er å integrere Lighthouse CI i din CI/CD-flyt. Her er et eksempel på hvordan du kan integrere det med GitHub Actions:

Opprett en .github/workflows/lighthouse.yml-fil i ditt repository:

            name: Lighthouse CI

on:
  push:
    branches: [main]
  pull_request:

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - name: Install Dependencies
        run: npm ci
      - name: Run Lighthouse CI
        run: |          npm run build
          lhci autorun

            

              
                Copy
              
            
          

Denne arbeidsflyten utfører følgende trinn:

• Sjekker ut koden.
• Setter opp Node.js.
• Installerer avhengigheter.
• Kjører Lighthouse CI. Dette trinnet bygger først applikasjonen (npm run build), deretter kjøres lhci autorun, som utfører Lighthouse-revisjonene og validerer resultatene mot de konfigurerte terskelverdiene.

Tilpass denne arbeidsflyten til ditt spesifikke CI/CD-system og prosjektkrav. For eksempel, hvis du bruker GitLab CI, ville du konfigurert en .gitlab-ci.yml-fil med lignende trinn.

4. Kjør Lighthouse CI

Commit endringene dine og push dem til ditt repository. CI/CD-flyten vil automatisk kjøre Lighthouse CI. Hvis noen av påstandene feiler, vil bygget feile, noe som gir verdifull tilbakemelding til utviklere. Lighthouse CI-rapportene vil være tilgjengelige på URL-en som CI/CD-systemet gir.

Avansert Konfigurasjon og Tilpasning

Lighthouse CI tilbyr et bredt spekter av konfigurasjonsalternativer og tilpasningsmuligheter. Her er noen avanserte funksjoner:

1. Bruke Lighthouse CI-serveren

Lighthouse CI-serveren gir et sentralisert dashbord for å spore ytelsesmålinger over tid, administrere prosjekter og samarbeide om ytelsesproblemer. For å bruke Lighthouse CI-serveren, må du sette opp en instans og konfigurere din lighthouserc.js-fil til å laste opp rapporter til serveren.

Først, deployer serveren. Det finnes ulike deployeringsalternativer, inkludert Docker, Heroku og skyleverandører som AWS og Google Cloud. Se Lighthouse CI-dokumentasjonen for detaljerte instruksjoner om hvordan du deployerer serveren.

Når serveren kjører, oppdater din lighthouserc.js-fil til å peke mot serveren:

            module.exports = {
  ci:
{
    collect: {
      url: ['http://localhost:3000'],
      startServerCommand: 'npm start',
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', { minScore: 0.9 }],
      },
    },
    upload:
{
      target: 'lhci',
      serverBaseUrl: 'YOUR_LHCI_SERVER_URL',
      token: 'YOUR_LHCI_SERVER_TOKEN',
    },
  },
};

            

              
                Copy
              
            
          

Erstatt YOUR_LHCI_SERVER_URL med URL-en til din Lighthouse CI-server og YOUR_LHCI_SERVER_TOKEN med et token generert av serveren. Tokenet autentiserer din CI-flyt mot serveren.

2. Sette Ytelsesbudsjetter

Ytelsesbudsjetter definerer akseptable terskelverdier for spesifikke metrikker. Lighthouse CI lar deg sette ytelsesbudsjetter og la bygg feile hvis disse budsjettene overskrides. Dette bidrar til å forhindre ytelsesregresjoner og sikrer at nettstedet ditt holder seg innenfor akseptable ytelsesgrenser.

Du kan definere ytelsesbudsjetter i din lighthouserc.js-fil ved å bruke assert.assertions-egenskapen. For eksempel, for å sette et ytelsesbudsjett for First Contentful Paint (FCP), kan du legge til følgende påstand:

            'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
            

              
                Copy
              
            
          

Denne påstanden vil få bygget til å feile hvis FCP er større enn 2500 millisekunder.

3. Tilpasse Lighthouse-konfigurasjon

Lighthouse CI lar deg tilpasse Lighthouse-konfigurasjonen for å passe dine spesifikke behov. Du kan konfigurere ulike Lighthouse-innstillinger, som for eksempel:

• onlyAudits: Spesifiser en liste over revisjoner som skal kjøres.
• skipAudits: Spesifiser en liste over revisjoner som skal hoppes over.
• throttling: Konfigurer innstillinger for nettverksbegrensning for å simulere ulike nettverksforhold.
• formFactor: Spesifiser formfaktoren (desktop eller mobil) som skal emuleres.
• screenEmulation: Konfigurer innstillinger for skjermemulering.

For å tilpasse Lighthouse-konfigurasjonen, kan du sende et --config-path-flagg til lhci autorun-kommandoen, som peker til en egendefinert Lighthouse-konfigurasjonsfil. Se Lighthouse-dokumentasjonen for en komplett liste over konfigurasjonsalternativer.

4. Revidere Autentiserte Sider

Revidering av autentiserte sider krever en litt annen tilnærming. Du må gi Lighthouse CI en måte å autentisere seg på før revisjonene kjøres. Dette kan oppnås ved hjelp av informasjonskapsler (cookies) eller ved å skripte innloggingsprosessen.

En vanlig tilnærming er å bruke --extra-headers-flagget for å sende autentiserings-cookies til Lighthouse CI. Du kan hente disse fra nettleserens utviklerverktøy etter å ha logget inn på nettstedet.

Alternativt kan du bruke et Puppeteer-skript for å automatisere innloggingsprosessen og deretter kjøre Lighthouse-revisjoner på de autentiserte sidene. Denne tilnærmingen gir mer fleksibilitet og lar deg håndtere komplekse autentiseringsscenarioer.Beste Praksis for Frontend-ytelsestesting med Lighthouse CI

For å maksimere fordelene med Lighthouse CI, følg disse beste praksisene:

• Kjør Lighthouse CI Regelmessig: Integrer Lighthouse CI i din CI/CD-flyt for å kjøre revisjoner automatisk med hver commit eller pull request. Dette sikrer at ytelsesregresjoner oppdages tidlig og håndteres raskt.
• Sett Realistiske Ytelsesbudsjetter: Definer ytelsesbudsjetter som er utfordrende, men oppnåelige. Start med konservative budsjetter og stram dem gradvis inn etter hvert som nettstedets ytelse forbedres. Vurder å sette forskjellige budsjetter for ulike typer sider, avhengig av deres kompleksitet og viktighet.
• Fokuser på Nøkkelmetrikker: Prioriter de viktigste ytelsesmålingene som har størst innvirkning på brukeropplevelsen og forretningsresultatene. Googles Core Web Vitals (LCP, FID og CLS) er et godt utgangspunkt.
• Undersøk og Løs Ytelsesproblemer: Når Lighthouse CI identifiserer ytelsesproblemer, undersøk dem grundig og implementer passende løsninger. Bruk Lighthouse-rapportene til å identifisere årsakene til problemene og prioriter de mest virkningsfulle reparasjonene.
• Overvåk Ytelse Over Tid: Spor ytelsesmålinger over tid for å identifisere trender og mønstre. Bruk Lighthouse CI-serveren eller andre overvåkingsverktøy for å visualisere ytelsesdata og identifisere forbedringsområder.
• Lær Opp Teamet Ditt: Sørg for at teamet ditt forstår viktigheten av frontend-ytelse og hvordan man bruker Lighthouse CI effektivt. Tilby opplæring og ressurser for å hjelpe dem med å forbedre sine ferdigheter og kunnskaper.
• Ta Hensyn til Globale Nettverksforhold: Når du setter ytelsesbudsjetter, vurder nettverksforholdene i ulike deler av verden. Brukere i områder med tregere internetthastigheter kan ha en annerledes opplevelse enn brukere i områder med raskere hastigheter. Bruk verktøy for å simulere ulike nettverksforhold under testing.
• Optimaliser Bilder: Bildeoptimalisering er en kritisk del av frontend-ytelse. Bruk verktøy som ImageOptim, TinyPNG eller online-konverterere for å komprimere og optimalisere bilder uten å miste kvalitet. Bruk moderne bildeformater som WebP, som gir bedre komprimering og kvalitet enn tradisjonelle formater som JPEG og PNG. Implementer lat lasting (lazy loading) for bilder som ikke er umiddelbart synlige i visningsområdet.
• Minifiser og Komprimer Kode: Minifiser din HTML-, CSS- og JavaScript-kode for å redusere filstørrelser. Bruk verktøy som UglifyJS, Terser eller online-minifiserere. Aktiver Gzip- eller Brotli-komprimering på serveren din for å ytterligere redusere størrelsen på overførte filer.
• Utnytt Nettleser-Caching: Konfigurer serveren din til å sette passende cache-headere for statiske ressurser som bilder, CSS- og JavaScript-filer. Dette lar nettlesere mellomlagre disse ressursene og unngå å laste dem ned gjentatte ganger.

Konklusjon

Integrering av Lighthouse CI i din utviklingsflyt er et avgjørende skritt mot å bygge høytytende, tilgjengelige og SEO-vennlige nettsteder. Ved å automatisere frontend-ytelsestesting og spore ytelse over tid, kan du identifisere og løse ytelsesproblemer tidlig, forbedre brukeropplevelsen og drive forretningsresultater. Omfavn Lighthouse CI og gjør kontinuerlig ytelsesforbedring til en kjerneverdi i din utviklingsprosess. Husk at ytelsen til et nettsted ikke er en engangsinnsats, men en pågående prosess som krever konstant oppmerksomhet og optimalisering. Vurder kulturelle og regionale faktorer for å sikre en sømløs opplevelse for alle dine brukere, uavhengig av deres plassering eller enhet. Ved å følge beste praksis som er skissert i denne artikkelen, kan du sikre at nettstedet ditt leverer en rask, pålitelig og hyggelig opplevelse til brukere over hele verden.